<template>
  <div>
      <MyFormCreate :clear-event="getTableList" v-model="searchForm" :rule="searchFormRules" :key="key">
        <template #field-inspectAt="scope">
          <el-form-item>
            <el-date-picker type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
              value-format="YYYY-MM-DD" placeholder="请选择创建时间" style="width: 100%" v-model="searchForm.inspectAt"
              :teleported="false" @change="dateChange" />
          </el-form-item>
        </template>
        <el-button type="primary" @click="DebounceGetTableList">搜索</el-button>

        <sj-button custom-type="sinfo" @click="DebounceResetting">重置</sj-button>
      </MyFormCreate>
      <div>
        <!-- <el-button type="primary" :icon="Plus" @click="add">添加</el-button> -->
        <!-- <el-button type="danger" :disabled="!selectionData.length" @click="deletes()">批量删除</el-button> -->
      </div>
      <pure-table class="" :data="tableData.data" :columns="initPureTableConfig(roleTableConfig)"
        @selection-change="selectionChange" :isShowPag="false">
        <template #missionStatus="{ row }">
          <span :style="{ color: INSPECTIONSTATUS1TEXT[row.missionStatus]?.color }">
            {{ isNullOrEmpty(INSPECTIONSTATUS1TEXT[row.missionStatus]?.label) }}
          </span>
        </template>
        <template #cycleValue="{ row }">
          <div>
            {{ isNullOrEmpty(row.cycleValue) }} {{ isNullOrEmpty(PERIODUNITTEXT[row.cycleUnit]?.label) }}
          </div>
        </template>
        <template #inspectResult="{ row }">
          <div v-if="row.missionStatus !== 1">
            <span :class="row.inspectResult == 0 ? 'text-[#4cb61f]' : 'text-[#d22c2e]'">
              {{ isNullOrEmpty(row.inspectResult == 0 ? "正常" : `异常(${row.inspectResult})`) }}</span>
          </div>
          <div v-else>--</div>
        </template>

        <template #action="{ row }">
          <el-space>
            <sj-link custom-type="sblue" :underline="false" @click="info(row)">查看</sj-link>
            <!-- <sj-link custom-type="sblue" :underline="false" @click="edit(row)">编辑</sj-link> -->
            <!-- <sj-link custom-type="sred" :underline="false" @click="deletes(row)">删除</sj-link> -->
          </el-space>
        </template>
      </pure-table>
      <div class="mt-5">
        <el-pagination v-model:current-page="searchForm.page" v-model:page-size="searchForm.limit" background
          :layout="PAGE_LAYOUT" :total="tableData.total" @size-change="getTableList" @current-change="getTableList" />
      </div>

  </div>
</template>
<script lang="ts" setup>
import { isNullOrEmpty, initPureTableConfig } from '@/utils/functions'
import MyFormCreate from "@/components/MyFormCreate/index.vue";
import RePage from "@/components/RePage/index.vue";
import infos from "./info.vue";
import {
  INSPECTIONRESULT,
  PERIODUNITTEXT,
  INSPECTIONSTATUSS,
  INSPECTIONSTATUS1TEXT
} from "@/constant/dayly-inspection";
import { reactive, ref, h } from "vue";
import { PAGE_LAYOUT } from "@/constant";
import { getInspectionRecord, getInspectionDetail } from "@/api/screen/lnspection-tasks/index";
import { titles, defaultSearchForm, prompt, defaultInfoForm } from "./index";
import { addDialog } from "@/components/ReDialog";
import { deviceDetection, debounce } from "@pureadmin/utils";
const props = defineProps({
  defaultSearch: {
    type: Object,
    default: null
  }
})
const searchForm = ref(defaultSearchForm());
const key = ref(0);
const showInfo = ref();
const formRef = ref();
const tableData = reactive({
  data: [],
  total: 0
});

const searchFormRules = [
  {
    type: "input", field: "projectName", title: titles.projectName, value: null,
    props: { placeholder: prompt.projectName, clearable: true }
  },
  {
    type: "fieldComponent", field: "inspectAt", title: titles.inspectAt,
    value: null,
    props: { placeholder: prompt.inspectAt, clearable: true }
  },
  {
    type: "select", field: "missionStatus", title: titles.missionStatus, value: null,
    options: INSPECTIONSTATUSS,
    props: { placeholder: prompt.missionStatus, clearable: true, teleported: false }
  },
  {
    type: "select", field: "inspectResult", title: titles.inspectResult, value: null,
    options: INSPECTIONRESULT,
    props: { placeholder: prompt.inspectResult, clearable: true, teleported: false }
  },
  { type: "number", field: "page", title: "page", hidden: true },
  { type: "number", field: "limit", title: "limit", hidden: true }
];
const selectionData = ref([]);
const roleTableConfig = [
  // { type: "selection", align: "left" },
  { prop: "id", label: titles.id, width: 100, fixed: "left" },
  { prop: "unityName", label: "所属单位", minWidth: 150,showOverflowTooltip:true },
  { prop: "projectName", label: titles.projectName, minWidth: 150,showOverflowTooltip:true },
  { prop: "missionName", label: titles.missionName, minWidth: 100 ,showOverflowTooltip:true },
  { slot: "missionStatus", label: titles.missionStatus, minWidth: 100 },
  { slot: "cycleValue", label: titles.cycleValue, minWidth: 100 },
  { prop: "inspectUser", label: titles.inspectUser, minWidth: 100 },
  { prop: "finishDate", label: titles.finishDate, minWidth: 150 },
  { slot: "inspectResult", label: titles.inspectResult, minWidth: 100 },
  { prop: "dealCount", label: titles.dealCount, minWidth: 100 },
  { slot: "action", label: titles.action, width: 80, fixed: "right" }
];
onMounted(() => {
  if (props.defaultSearch) {
    let searchRule = searchFormRules.map(item => item.field)
    for (const key in props.defaultSearch) {
      if (!searchRule.includes(key)) {
        searchFormRules.push({ type: '', field: key, title: key, hidden: true })
      }
      searchForm.value[key] = props.defaultSearch[key];
    }
    key.value = Math.floor(Math.random() * 1000)
  }
  getTableList()
});
// 获取列表数据
const getTableList = () => {
  getInspectionRecord(searchForm.value).then(res => {
    if (res.code === 200) {
      tableData.data = res.result.data;
      tableData.total = res.result.total;
    }
  });
};
const dateChange = e => {
  console.log(e);
  if (e) {
    searchForm.value.startDate = e[0];
    searchForm.value.endDate = e[1];
  } else {
    searchForm.value.startDate = '';
    searchForm.value.endDate = '';
  }
  getTableList()
};
// 重置搜索栏
const resetting = () => {
  //点击重置按键
  Object.assign(searchForm.value, defaultSearchForm());
  key.value++;
  getTableList();
};
// 详情
const info = row => {
  addDialog({
    title: `详情`,
    hideFooter: true,
    width: "1100px",
    draggable: true,
    fullscreen: false,
    props: {
      taskId: row.id
    },
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(infos, { ref: formRef }),
    openAutoFocus({ options, index }) {
      options.props = {
        isLoading: true,
        taskId: row.id,
        formInline: defaultInfoForm()
      };
      getInspectionDetail({ id: row.id })
        .then(res => {
          if (res.code == 200) {
            console.log(res.result, "xsss");
            showInfo.value = res.result;
            options.props.formInline = res.result;
          }
        })
        .finally(() => {
          options.props.isLoading = false;
        });
    }
  });
};
const selectionChange = data => {
  selectionData.value = data;
};
// 获取列表
const DebounceGetTableList = debounce(getTableList, 1000, true);
// 重置
const DebounceResetting = debounce(resetting, 1000, true);
</script>
<style lang="scss" scoped>
::v-deep(.el-form-item__content) {
  display: block !important;
}
</style>
